<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
	
	
	xmlns:composite="http://xmlns.jcp.org/jsf/composite">

<!-- INTERFACE -->
<composite:interface name="tileSmallTitle"
	shortDescription="Provides a top-aligned imaged followed by text.">
	<composite:attribute name="pubId" required="true" type="java.lang.Long" />
</composite:interface>

<!-- IMPLEMENTATION: REUSABLE FOR CREATE AND UPDATE ACTIONS-->
<composite:implementation
	xmlns:mywidgets="http://xmlns.jcp.org/jsf/composite/widgets">
	#{pubController.init(cc.attrs.pubId)}	
	

		<div class="tile tileSmallTitle">
		<div class="horizontal" id="horizontal_#{pubController.id}">

			<div class="preview" id="preview_#{pubController.id}">
				<div class="title">
					<ui:remove>Need another div, because padding doesn't work with %-width in parent tag.</ui:remove>
					<div class="paddingBox">
						#{pubController.title}
						<div class="metaData">
							<h:panelGroup rendered="#{not empty pubController.dateCreated}">
								<h:outputText value="#{pubController.dateCreated}"
									styleClass="date">
									<f:convertDateTime pattern="MMMM d yyyy" type="date" />
								</h:outputText>
							</h:panelGroup>
							<h:panelGroup rendered="#{not empty pubController.location}">
								<span>#{pubController.location}</span>
							</h:panelGroup>
							<h:panelGroup rendered="#{not empty pubController.mediaSource}">
								<span>#{pubController.mediaSource}</span>
							</h:panelGroup>
						</div>
					</div>
				</div>
			</div>

			<div class="details" id="details_#{pubController.id}">
				<div class="teaser">#{pubController.teaser}</div>
			</div>
		</div>
	</div>

	<script>						
		$(document).ready( function () {
			$('#preview_#{cc.attrs.pubId}').animateTST({
				containerId: '#horizontal_#{cc.attrs.pubId}',
				previewId: '#preview_#{cc.attrs.pubId}',
				 detailId: '#details_#{cc.attrs.pubId}'
			})
		 });
		</script>

</composite:implementation>
</html>